<!DOCTYPE html>
<html>

<head>
    <style>
        body {
            width: 1280px;
            font-size: 16px;
        }

        @media screen and (min-width: 1280px) {
            body {
                width: auto;
            }
        }

        nav {
            /* background-color: whitesmoke; */
            text-align: right;
        }

        .icon {
            display: inline-block;
            width: 1.5rem;
            height: 1.5rem;
            white-space: nowrap;
            vertical-align: text-bottom;
            /* vertical-align: center; */

        }

        .icon-logo {
            background: url("icons/book.svg") no-repeat center center;
            background-size: cover;
            margin-right: .4rem;
        }

        .icon-man {
            width: 1.2rem;
            height: 1.2rem;
            margin-right: .2rem;
            background: url("icons/人员.svg") no-repeat center center;
            background-size: cover;

        }


        #logo {
            font-size: 18px;
            font-weight: 550;
            float: left;
            line-height: calc(3rem + 2px);
            margin-left: 2rem;
        }



        nav li {
            list-style: none;
            display: inline-block;
            line-height: 3;
            padding: 0 1rem;
            border-bottom: 2px solid transparent;
        }

        nav li a {
            display: inline-block;
            text-decoration: none;
            color: inherit;
            font-family: "宋体";
            height: 100%;
            vertical-align: top;
        }

        nav li:last-child a {
            color: red;
        }

        nav li:hover {
            color: red;
            border-bottom: 2px solid red;
        }

        p {
            margin: 0;
        }

        .newlife {
            height: 35rem;
            background: url("image/2.jpeg") no-repeat center center;
            background-size: cover;
            color: white;
            position: relative;
        }

        .newlife div {
            position: absolute;
            top: 50%;
            left: 10%;
            vertical-align: middle;
            transform: translatey(-50%);
        }

        .main-title {
            font-size: 3rem;
            font-family: Arial, Helvetica, sans-serif;
            margin-bottom: .5rem;
        }

        .sub-title {
            width: 14rem;
            margin-bottom: 3rem;
        }

        .newlife button {
            font-size: 1.5rem;
            padding: .3rem 3rem;
            color: white;
            background-color: rgb(231, 77, 77);
            border: none;
            outline: none;
        }

        .newlife button:hover {
            cursor: pointer;
        }

        .four-choose {
            height: 15rem;
            font-size: 0;
        }

        #three-circle {
            border: red double 6px;
            border-radius: 50%;
            padding: 2px;

        }

        #three-circle div {
            box-sizing: border-box;
            border: red solid 2px;
            border-radius: 50%;
            width: 100%;
            height: 100%;
        }

        .four-choose .out-contain {
            box-sizing: border-box;
            width: 25%;
            height: 100%;
            position: relative;
            display: inline-block;
            font-size: 1rem;
        }

        .four-choose .inner-contain {
            display: inline-block;
            position: absolute;
            width: 100%;
            top: 50%;
            transform: translateY(-50%);
        }

        .four-choose .inner-contain :nth-child(1) {
            margin: 0 auto;
            width: 30px;
            height: 30px;
            box-sizing: border-box;
        }

        #flag {
            background: url("icons/flag-旗子.svg") no-repeat center center;
            background-size: cover;
        }

        #flower {
            background: url("icons/花\ \(6\).svg") no-repeat center center;
            background-size: cover;
        }

        #square {
            background: url("icons/方块.svg") no-repeat center center;
            background-size: cover;
        }



        .four-choose .inner-contain :nth-child(2) {
            text-align: center;
            margin-top: 2rem;
            padding: 0 25%;
            border-right: 1px solid rgb(119, 119, 119);
        }

        .out-contain:last-child .inner-contain :nth-child(2) {
            border: none;
        }

        .new-world {
            border: 1px solid transparent;
            height: 18rem;
            background-color: rgb(226, 226, 226);
        }

        .new-world div {
            height: 5rem;
            background: url("icons/book.svg") no-repeat center center;
            background-size: contain;
            margin: 3rem 0 1rem 0;
        }

        .new-world p {
            text-align: center;
            font-size: 3rem;
            color: rgb(149, 149, 149);
        }

        .find-information {
            height: 18rem;
            background: url("image/3.png") no-repeat center center;
            background-size: cover;
            text-align: center;
            padding: 2rem 0;
        }

        .find-information p:nth-of-type(1) {
            font-size: 2rem;
            color: white;
        }

        .find-information hr {
            outline: none;
            width: 2rem;
            border-bottom: 1px solid white;
            margin-bottom: 1rem;
        }

        .find-information p:nth-of-type(2) {
            color: rgb(78, 78, 78);
            margin-bottom: 2rem;
        }

        .select-wrap select {
            width: 12rem;
            height: 2rem;
            padding: .2rem .5rem;
            background-color: rgb(255, 255, 255);
            outline: none;
            appearance: none;
            -webkit-appearance: none;
            border: none;
        }

        .select-wrap {
            display: inline-block;
            position: relative;
            border: 1px solid transparent;
            margin: 1rem;
        }

        .select-wrap::after {
            content: "";
            display: inline-block;
            width: 1rem;
            height: 1rem;
            right: .5rem;
            top: 50%;
            transform: translateY(-50%);
            background: url("icons/下拉框.svg") no-repeat center center;
            background-size: 80% 80%;
            background-color: rgb(231, 77, 77);
            position: absolute;
        }

        .select-wrap select:active {
            outline: 2px solid rgb(231, 77, 77);
        }


        .find-information button {
            width: 12rem;
            height: 2rem;
            padding: .2rem .5rem;
            background-color: rgb(231, 77, 77);
            color: white;
            outline: none;
            border: none;
            letter-spacing: 1rem;
        }

        .photo-frame {
            background-color: rgb(226, 226, 226);
            height: 50rem;
            position: relative;
        }

        .photo-frame>div {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            height: fit-content;
            width: fit-content;
            margin: auto;
        }

        .img-wrap {
            width: 15rem;
            height: 30rem;
            border: 1rem solid white;
            border-left: .5rem solid white;
            border-right: .5rem solid white;
            background: no-repeat center center;
            background-size: cover;
        }

        .img-contain {
            text-align: center;
            float: left;
            margin: 1rem;

        }

        .img-contain p:nth-of-type(1) {
            margin: .5rem 0;
        }

        .img-contain p:nth-of-type(2) {
            font-size: 12px;
            color: rgb(78, 78, 78);
        }

        .first-img {
            background-image: url("image/3.jpeg");
        }

        .second-img {
            background-image: url("image/4.webp");
        }

        .third-img {
            background-image: url("image/5.jpeg");
        }

        .fourth-img {
            background-image: url("image/6.webp");
        }

        .time {
            height: 50rem;
            font-size: 0;
            -webkit-text-size-adjust: none;
        }

        .newworld-time {
            width: 60%;
            display: inline-block;
            line-height: 50rem;
            background: url("image/7.jpeg") center center no-repeat;
            background-size: cover;
            text-align: center;
            color: white;
            overflow: hidden;
        }

        .newworld-time>div {
            display: inline-block;
            line-height: normal;
            vertical-align: middle;
        }

        .newworld-time>div :nth-child(1) {
            font-size: 4rem;
        }

        .newworld-time>div :nth-child(2) {
            font-size: 8rem;
            letter-spacing: .5rem;
            font-family: Arial, Helvetica, sans-serif;
        }

        .newworld-time>div :nth-child(n+3) {
            font-size: 1.5rem;
        }


        .newworld {
            width: 40%;
            height: 100%;
            font-size: 1rem;
            text-align: center;
            position: relative; 
            display: inline-block;          
        }

        .newworld::before {
            content: "";
            display: inline-block;
            border: 20px solid white;
            border-color: transparent white transparent transparent;
            border-right: 30px solid white;
            position: absolute;
            top:50%;
            left: -50px;
            transform: translateY(-50%);
        }

        .newworld > div {
            margin: auto;
            width: 70%;
            height: min-content;
            position: absolute;
            top:50%;
            left: 50%;
            transform: translate(-50%,-50%);
            
        }

        .newworld h2 {
            font-weight: 500;
        }

        .newworld h2 span {
            color: red;
        }

        .newworld button {
            color: rgb(231, 77, 77);
            padding: .5rem 2rem;
            border: 1px solid rgb(231, 77, 77);
            background-color: white;
            outline: none;
            margin-top: 2rem;
        }

        .newworld button:hover {
            background-color: rgb(231, 77, 77);
            color: white;
            cursor: pointer;
        }



        .newworld p{
            text-align: left;
            line-height: 2;
            color: rgb(167, 165, 165);
        }

        .dot {
            display:  inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            border: 1px solid gray;
            margin: 2rem .5rem;
        }

        .dot-active {
            background-color: gray;
        }

        .colorful {
            height: 50rem;
            width: 100%;
            font-size: 0;
            /* display: table-cell; */
            text-align: center;
            overflow: hidden;
        }

        .colorful article {
            height: 100%;
            width: 30%;
            font-size: 2rem;
            float: left;
            position: relative;
        }


        .colorful article:last-child {
            width: 40%;
        }

        .colorful article > div {
            position: absolute;
            width: fit-content;
            top:50%;
            left: 50%;
            transform: translate(-50%,-50%);

        }

        .colorful article hr {
            width: 15%;
            border: 1px solid white;
            margin: 2rem auto;
        }

        .colorful article:nth-child(1) {
            color: white;
            background-color: rgb(231, 77, 77);
        }

        .colorful button {
            padding: .5rem 2rem;
            background-color: transparent;
            border: 1px solid white;
            color:  white;
            font-size: 1.5rem;
        }

        .colorful button:hover {
            cursor: pointer;
            background-color: white;
            color: rgb(231, 77, 77);
        }

        .colorful article:nth-child(2) {
            color: black;
        }

        .colorful article:nth-child(2) button {
            color:  rgb(231, 77, 77);
            border: 1px solid rgb(231, 77, 77);
        }

        .colorful article:nth-child(2) button:hover {
            background-color: rgb(231, 77, 77);
            color: white;
        }

        .colorful article:nth-child(2) hr {
            width: 15%;
            border: 1px solid black;
        }

        .colorful article:nth-child(2)::before {
            content: "";
            display: inline-block;
            position: absolute;
            top:50%;
            right: -50px;
            border: 20px solid white;
            border-color: transparent transparent transparent white;
            border-left: 30px solid white;
            z-index: 1;
        }

        .colorful article:nth-child(3) {
            background: url("image/8.jpeg") no-repeat center center;
            background-size: cover;
        }


        .contact-header {
            padding: 10rem 0;
            text-align: center;
        }

        .contact-header h2 {
            margin-bottom: .5rem;
        }

        .contact-header hr {
            width: 3%;
            border: 1px solid rgb(231, 77, 77);
            margin-bottom: 1.5rem;
        }

        .contact-header p {
            width: 30%;
            margin: auto;
            font-size: 14px;
            color: rgb(161, 161, 161);
        }

        .contact-main {
            padding: 0 5rem 8rem 5rem;
            overflow: hidden;
        }

        .contact-aside {
            float: left;
            width: 30%; 
        }

        .contact-aside h2 {
            margin: 1rem 0;
            font-size: 1rem;
        }

        .contact-aside p {
            font-size: .8rem;
        }

        .contact-aside a{
            display: block;
            font-size: .6rem;
            text-align: right;
            color: rgb(53, 53, 53);
            position: relative;
            text-decoration: none;
        }

        .contact-aside a::before{
            content: "";
            position: absolute;
            width: .6rem;
            height: .6rem;
            background: url('icons/下拉框_black.svg') no-repeat center center;
            background-size: contain;
            transform: translate(-1rem,50%);
            
        }

        input,
        textarea {
            background-color: rgb(235, 235, 235);
            padding: .8rem;
            outline: none;
            border: none;
            font-size: 1rem;
            margin: .5rem 0;
        }

        .contact-method {
            margin-left: 35%;
            text-align: justify;
        }

        .contact-method input:nth-of-type(-n+4) {
            width: 45%;
        }
        textarea {
            box-sizing: border-box;
            width: 100%;
            height: 8rem;
        }

        .contact-method button {
            background-color: rgb(235, 235, 235);
            border: none;
            width: 100%;
            padding: .5rem;
            font-size: 1rem;
            outline: none;
        }

        .contact-method button:hover {
            cursor: pointer;
            background-color: rgb(168, 168, 168);
        }

        .contact-us {
            padding: 5rem 0;
            text-align: center;
            background-color: rgba(2, 40, 58, 0.541);
            color: white;
        }

        .contact-us p {
            margin: auto;
            width: 40%;
        }

        .contact-us > div {
            font-size: 0;
            margin: 2rem 0;
            position: relative;
        }
        .contact-us input {
            width: 30%;
            background-color: white;
            margin: 0;
        }

        .contact-us > div button {
            position: absolute;
            top:0;
            bottom: 0;
            border: none;
            outline: none;
            background-color: rgb(156, 156, 156);
            color: white;
            padding: 0 2rem;
        }

        .contact-us > div button:hover {
            background-color: rgb(117, 117, 117);
            cursor: pointer;
        }

        .contact-us img{
            width: 2rem;
            height: 2rem;
            margin: 0 2rem;
        }

        
        footer {
            background-color: rgba(2, 40, 58, 0.781);
            height: 5rem;
            color: white;
            font-size: .8rem;
            position: relative;
        }

        footer p {
            position: absolute;
        }

        footer p:first-child {
            top:50%;
            left:3%
        }

        footer p:last-child {
            top:50%;
            right:1%;
        }



    </style>
</head>

<body>
    <nav>
        <div id="logo"><span class="icon icon-logo"></span>新世界</div>
        <li><a href=#>首页</a></li>
        <li><a href=#>最新活动</a></li>
        <li><a href=#>项目介绍</a></li>
        <li><a href=#>爱心社区</a></li>
        <li><a href=#>关于我们</a></li>
        <li><a href=#><span class="icon icon-man"></span>登录</a></li>
    </nav>
    <main>
        <section class="newlife">
            <div>
                <p class="main-title">Time of new life</p>
                <p class="sub-title">新时代，年轻的人们让我们一起体验新生活，<b>享</b>受新生活</p>
                <button>开始体验</button>
            </div>
        </section>

        <section class="four-choose">
            <section class="out-contain">
                <div class="inner-contain">
                    <div id="three-circle">
                        <div></div>
                    </div>
                    <p>打造全新世界观，让你更爱你的生活</p>
                </div>
            </section>

            <section class="out-contain">
                <div class="inner-contain">
                    <div id="flag">
                    </div>
                    <p>丰富多彩的统一活动，发挥新世界的主人公意识</p>
                </div>
            </section>

            <section class="out-contain">
                <div class="inner-contain">
                    <div id="flower">
                        <div></div>
                    </div>
                    <p>时尚的新理念，超前体验未知的生活</p>
                </div>
            </section>

            <section class="out-contain">
                <div class="inner-contain">
                    <div id="square">
                        <div></div>
                    </div>
                    <p>完善的培训机制，培养你全新的世界观</p>
                </div>
            </section>
        </section>

        <section class="new-world">
            <div></div>
            <p>关于新世界，你不知道的还有什么?</p>
        </section>

        <section class="find-information">
            <p>
                查找新世界城市活动信息
            </p>
            <hr>
            <p>每个城市有不同的活动信息，请自行查询所需要了解的城市</p>
            <div class="search-city">
                <div class="select-wrap">
                    <select>
                        <option>中国</option>
                        <option>日本</option>
                        <option>韩国</option>
                        <option>美国</option>
                    </select>
                </div>

                <div class="select-wrap">
                    <select>
                        <option>北京市</option>
                        <option>广东省</option>
                        <option>河北市</option>
                        <option>辽宁市</option>
                    </select>

                </div>

                <div class="select-wrap">
                    <select>
                        <option>广州</option>
                        <option>哈尔滨</option>
                        <option>深圳</option>
                        <option>韶关</option>
                    </select>
                </div>
                <button>搜索</button>
            </div>
        </section>

        <section class="photo-frame">
            <div>
                <div class="img-contain">
                    <div class="img-wrap first-img">
                    </div>
                    <p>北京活动</p>
                    <p>新社区大联盟</p>
                </div>
                <div class="img-contain">
                    <p>上海活动</p>
                    <p>夜景上海景观探索</p>
                    <div class="img-wrap second-img">
                    </div>
                </div>
                <div class="img-contain">
                    <div class="img-wrap third-img">
                    </div>
                    <p>深圳活动</p>
                    <p>全新海岸线景观站</p>
                </div>
                <div class="img-contain">
                    <div class="img-wrap fourth-img">
                    </div>
                    <p>香港活动</p>
                    <p>奢侈消费大派送</p>
                </div>
            </div>

        </section>
        <section class="time">
            <div class="newworld-time">
                <div>
                    <p>新世界</p>
                    <p>TIME</p>
                    <p>@新世界 - 北京</p>
                    <p>2016.04.01</p>
                </div>
            </div>
            <article class="newworld">
                <div>
                    <h2>新世界／<span>01</span></h2>
                    <p>新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界</p>
                    <button>更多详情</button>
                    <div>
                        <div class="dot dot-active"></div>
                        <div class="dot"></div>
                        <div class="dot"></div>
                    </div>

                </div>
            </article>
        </section>
        
        <section class="colorful">
            <article>
                <div>
                    <p>新时代</p>
                    <p>关于爱生活的我们</p>
                    <hr>
                    <button>查看更多</button>
                </div>

            </article>
            <article>
                <div>
                    <p>新时代</p>
                    <p>关于爱生活的我们</p>
                    <hr>
                    <button>查看更多</button>
                </div>
            </article>
            <article>
                <!-- 放置图片 -->
            </article>
        </section>
        <section class="contact">
            <div class="contact-header">
                <h2>成为我们的志愿者</h2>
                <hr>
                <p>新世界的大家庭需要每一个爱生活的人加入，如果你够年轻，有梦想，有激情那就不要由于，快来加入我们，成为改变所有人生活的人</p>
            </div>
            <div class="contact-main">
                <div class="contact-aside">
                    <article>
                        <h2>新世界志愿者协议</h2>
                        <p>加入新世界制原则的人员必须准守中华人们共和国的相关法律法规，并且绷着平等资源的原则......</p>
                        <a href="#">more</a>
                    </article>
                    <article>
                        <h2>新世界志愿者协议</h2>
                        <p>加入新世界制原则的人员必须准守中华人们共和国的相关法律法规，并且绷着平等资源的原则......</p>
                        <a href="#">more</a>
                    </article>
                    <article>
                        <h2>更多条款</h2>
                        <a href="#">more</a>
                    </article>
                </div>
                <div class="contact-method">
                    <input type="text" id="username" placeholder="姓名：">
                    <input type="text" id="age" placeholder="年龄：">
                    <input type="text" id="telephone" placeholder="联系方式：">
                    <input type="text" id="address" placeholder="联系地址：">
                    <textarea id="short-world" placeholder="请简单描述您梦想的生活" maxlength="500"></textarea>
                    <button>提交申请</button>
                </div>
            </div>
        </section>

        <section class="contact-us">
            <h2>联系我们</h2>
            <p>为了更好的获取我们最新的产品资讯，您可以留下您的电子邮箱快速订阅我们的产品资讯　也可以通过以下任务方式关注我们的动态</p>
            <div>
                <input type="text" placeholder="someone@email.com">
                <button>提交</button>
            </div>
            <img src="icons/QQ.svg">
            <img src="icons/新浪微博.svg">
            <img src="icons/twitter.svg">
            <img src="icons/互联网.svg">
        </section>
    </main>
    <footer>
        <p>@2016新世界</p>
        <p>Back to top</p>
    </footer>
</body>

</html>